{% extends 'movie/base.html' %}
{% load staticfiles %}
{% load comment_extras %}
{% load aside %}
{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'movie/css/movie_detail.css' %}">
    <script type="text/javascript" src="{% static '/movie/js/jquery.raty.js' %}"></script>


{% endblock %}
{% block navbar %}

    <div class="big-wrapper">
    <aside>{% most_review movie %}</aside>
    <div class="wrapper">
    <div class="movie-detail">
        <div class="content">
            <div class="subject clearfix">
                <h1><a href="javascript:void(0)">{{ movie.title }}</a></h1>
                <div id="mainpic">
                    <a class="nbgnbg" href="#" title="movie-poster">
                        <img class="ui medium bordered image" src="{% static 'movie/images/pexels-photo-121501.jpeg' %}"
                             title="movie-image" alt="Dangal"
                             id="movie-image"
                             rel="v:image">
                    </a>
                </div>
                <div id="movie-info">
                    <span class="movie-directors"><strong>导演</strong></span>:
                    {% for director in movie.directors.split %}
                        <a href="javascript:void(0)"><span class="movie-director">{{ director }}</span></a>
                    {% endfor %}<br>
                    <span class="movie-actor"><strong>主演</strong></span>:
                    {% for cast in movie.casts.split %}
                        <a href="javascript:void(0)"><span class="movie-cast">{{ cast }}</span></a>
                    {% endfor %}<br>
                    <span class="movie-genres"><strong>类型:</strong></span>
                    <span class="movies-type">{{ movie.genres }}</span>
                    <span class="movie-area"><strong>制片国家/地区:</strong></span><br>
                    <span class="movie-countries">{{ movie.countries }}</span><br>
                    <span class="movie-era"><strong>年代:</strong></span>
                    <span class="movie-year">{{ movie.year }}</span><br>
                    <span class="movie-alias"><strong>又名:</strong></span>
                    <span class="movie-via">{{ movie.origin }}</span><br>
                    <span class="movie-intro"><strong>简介:{{ user.id }}</strong></span>
                    <span class="movie-brief">{{ movie.summary }}</span>
                </div>
            </div>
            <div class="interest-sect1">
                <div class="rating-show-box">
                    <div class="clearfix">
                        <div class="rating-logo">
                            小柿子评分
                        </div>
                    </div>
                    <div class="rating-score">
                        <div class="rating-score-digit">
                            {{ movie.rating }}
                        </div>
                        <div class="rating-score-star" data-score="{{ movie.rating }}"
                             data-path="{% static 'movie/images/img' %}"
                             data-readOnly="true">
                        </div>
                        <div class="rating-score-num">
                            {{ movie.comment_set.count }}
                        </div>
                    </div>
                </div>
                <div class="rating-action-box">
                    <div class="rating-logo">
                        您来评分
                    </div>
                    <div class="rating-action-star">
                        {% if user|visit_stamp:movie.id %}
                            {% with u_stamp=user|visit_stamp:movie.id %}
                                <div id="rating-raty" class="rating-raty"
                                     data-path="{% static 'movie/images/img' %}"
                                     data-readOnly="true"
                                     data-score="{{ u_stamp.rate }}">
                                </div>
                                {{ u_stamp.rate }}
                            {% endwith %}
                        {% else %}
                            <div id="rating-raty" class="rating-raty"
                                    {#                                 data-readOnly="false"#}
                                 data-score="0"
                                 data-path="{% static 'movie/images/img' %}"
                                 data-movie-id="{{ movie.id }}"
                                 data-user-id="{{ user.id }}">
                            </div>
                            hello,
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
{% endblock %}
{% block content %}
    {% autoescape off %}  {# 防止django模板系统自动转义 才能展示html标记 #}
        {% build_comment_tree comments_tree user.id %}
    {% endautoescape %}
    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">写影评</h4>
                </div>
                <div class="modal-body">
                    <form class="ui reply form" action="#" method="post">
                        <div class="field">
                            <input type="hidden" class="movie-id" name="movie-id" value="{{ movie.id }}"/>
                            {#        <input type="hidden" name="movie-title" value="{{ movie.title }}" />#}
                            <input type="hidden" class="user-id" name="user-id" value="{{ user.id }}">
                            {#        <input type="hidden" name="user-name" value="{{ user.username }}">#}
                            <label>

                                <textarea name="comment-content" class="comment-content" data-toggle="popover"
                                          data-trigger="focus"
                                          data-placement="bottom"
                                          data-content="评论内容不允许为空or大于100字"
                                          style="background-color: rgb(246, 244, 236);"></textarea>
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary" id="add-reply" value="Add Reply">
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        $(document).ready(function () {
            $(".to-reply").click(function () {
                {#console.log($(this).siblings(".comment-id").text());#}
                $(this).parent().after(add_reply_form($(this).siblings(".comment-id").html()));
                $(".to-reply-comment").focus();
                event.stopPropagation();//FAQ:防止冒泡
                $(document).on("click", "#close-to-reply", function () {
                    $(".to-reply-div").empty();

                    $("#writeComment").click(function () {
                        $("#formModal").modal();
                    });

                    $(".rating-score-star").raty({score: {{ movie.rating|safe }}});

                    $("#add-reply").click(function () {
                        var movie_id = $(".movie-id").val();
                        var user_id = $(".user-id").val();
                        var content = $(".comment-content").val();
                        if (content.length <= 0 || content.length >= 100) {
                            $(".comment-content").popover('toggle');
                            return false
                        }
                        $.ajax({
                            method: "POST",
                            dataType: "json",
                            url: "/movie_info/commentVerify/",
                            data: {"movie-id": movie_id, "user-id": user_id, "comment-content": content},
                            success: function (message) {
                                window.location.reload(true)
                            },
                            error: function (message) {
                                alert("fail");
                                window.location.reload(true)
                            }
                        })
                    })
                });

                {# 点赞模块 #}
                $(".comment").on("click", ".like", function () {
                    var lid = $(this).attr("data-like");
                    var cid = $(this).attr("comment-id");
                    var uid = {{ user.id|safe }};
                    var status = $(this).attr("data-status");
                    var oldTotal = parseInt($(this).text());
                    alert('oldTotal' + $(this).children(".zan").text());
                    var newTotal = 0;
                    if (status === "1") { //是状态=1奥！
                        newTotal = oldTotal - 1;
                        alert("-1的操作");
                        $(this).children(".zan").text((newTotal === 0) ? "0" : newTotal);
                        $(this).attr("data-status", "0");
                        $(this).children('img').attr('src', '/static/movie/images/like-off.png')
                    } else {
                        newTotal = oldTotal + 1;
                        alert("+1的操作");
                        $(this).children(".zan").text(newTotal);
                        $(this).attr("data-status", "1");
                        $(this).children('img').attr('src', '/static/movie/images/like-on.png')

                    }
                    alert(newTotal);
                    $.ajax({
                        url: "/movie_info/praiseVerify/",
                        data: {"praise-id": lid, "comment-id": cid, "user-id": uid, "status": status},
                        dataType: "json",
                        type: "POST",
                        success: function (data) {
                            alert("success");
                        },
                        error: function () {
                            alert('fail')
                        }
                    })
                });

                function add_reply_form(parent_id) {
                    alert(parent_id)
                    var reply_form = '<div class="to-reply-div">' +
                        '<form class="ui reply form" accept-charset="utf-8" id="to-reply-form" action="/movie_info/commentVerify/" method="post">' +
                        '    <div class="field">' +
                        '        <input type="hidden" name="movie-id" value="' + {{ movie.id|safe }} +'" />' +
                        '        <input type="hidden" name="user-id" value="' + {{ user.id|safe }} +'" />' +
                        '        <input type="hidden" name="parent-id" value="' + parent_id + '" />' +
                        '        <label>' +
                        '            <textarea required="required" name="comment-content" class="to-reply-comment" style="background-color: rgb(246, 244, 236);"></textarea>' +
                        '        </label>' +
                        '    </div>' +
                        '    <div class="ui labeled submit icon button">' +
                        '        <button type="button" id="close-to-reply"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' +
                        '        <input type="submit" class="btn btn-default" value="Add Reply">' +
                        '    </div> ' +
                        '</form>' +
                        '</div>';
                    return reply_form;
                }
            });
        })
    </script>
    <script src="{% static 'movie/js/rating.js' %}"></script>

{% endblock %}